<template>
  <div>

    <div class="header-wrapper">
      <div class="header">
        <div class="container">
          <div class="nav-left color-black-first">
            <img src="../../assets/image/logo.jpg" class="logo">
            帝全网络管理台
          </div>

          <!--<el-menu class="nav-menu" mode="horizontal" router text-color="#444" active-text-color="#409EFF" style="margin-left: 120px;">
            <el-submenu index="0">
              <template slot="title">首页</template>
              <el-menu-item index="/">
                数据统计
              </el-menu-item>
			  <el-menu-item index="/visitNum">
			    流量图
			  </el-menu-item>
			  <el-menu-item index="/integral">
			    积分流水
			  </el-menu-item>
            </el-submenu>

            <el-submenu index="1">
              <template slot="title">采购中心</template>
              <el-menu-item index="/procurement">
                采购列表
              </el-menu-item>
              <el-menu-item index="/procurement/pushList">
                推送记录
              </el-menu-item>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">招聘管理</template>
              <el-menu-item index="/job">
                招聘列表
              </el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">线下活动</template>
              <el-menu-item index="/activity">
                活动列表
              </el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">商品管理</template>
              <el-menu-item index="/product">
                商品列表
              </el-menu-item>
            </el-submenu>
            &lt;!&ndash;<el-submenu index="4" v-if="1+1 == 3">
              <template slot="title">智囊团管理</template>
              <el-menu-item index="/expert">
                智囊团列表
              </el-menu-item>
            </el-submenu>&ndash;&gt;

            <el-submenu index="5" v-if="role > 1">
              <template slot="title">工厂管理</template>
              <el-menu-item index="/company/authList">
                工厂认证列表
              </el-menu-item>
            </el-submenu>

            <el-submenu index="6">
              <template slot="title">风采管理</template>
              <el-menu-item index="/news/listOfMember">
                个人风采
              </el-menu-item>
              &lt;!&ndash;<el-menu-item index="/news/listOfCompany">
                公司风采
              </el-menu-item>
              <el-menu-item index="/news/listOfCommerce">
                商会风采
              </el-menu-item>&ndash;&gt;
            </el-submenu>

            <el-submenu v-if="role > 1" index="7">
              <template slot="title">会员管理</template>
              <el-menu-item index="/member">
                会员列表
              </el-menu-item>
              <el-menu-item v-if="role > 1" index="/superman">
                App管理者列表
              </el-menu-item>
            </el-submenu>

            <el-submenu index="8" v-if="role > 1">
              <template slot="title">积分管理</template>
              <el-menu-item index="/commission">
                积分列表
              </el-menu-item>
              <el-menu-item index="/drawCash">
                提现列表
              </el-menu-item>
            </el-submenu>
			
			<el-submenu index="9" v-if="role > 1">
			  <template slot="title">子账号</template>
			  <el-menu-item index="/account/SubordinateAccount">
			    子账号管理
			  </el-menu-item>
			</el-submenu>
			
			<el-submenu index="10" v-if="role > 1">
			  <template slot="title">活动赠送</template>
			  <el-menu-item v-if="role > 1" index="/jishitong">
			    即时通赠送
			  </el-menu-item>
			</el-submenu>

          </el-menu>-->

          <el-menu class="nav-menu nav-right" mode="horizontal" text-color="#555" active-text-color="#555">
            <el-menu-item index="101" @click="logout">退出登录</el-menu-item>
            <el-menu-item index="102" v-if="role > 1" @click="modifyPassHandle">修改密码</el-menu-item>
          </el-menu>

        </div>
      </div>
    </div>
    <PasswordModifyEditDialog :is-show="isShowPassEditDialog"></PasswordModifyEditDialog>
  </div>
</template>


<script>

  import PasswordModifyEditDialog from '../PasswordModifyEditDialog'

  import UserApi from '../../api/UserApi'

  import { mapMutations, mapGetters } from 'vuex'

//需要导入vuex的数据管理
import Store from '../../store/index.js'

  export default {
    components: {
      PasswordModifyEditDialog
    },
    data() {
      return {
        isShowPassEditDialog: false,
		role:''
      }
    },
    computed: {
      ...mapGetters(['hasPerm', 'hasPerms'])
    },
    created(){
      this.$root.eventHub.$on('closePassEditDialog', this.hidePassDialog);
	  this.role = Store.state.user.role;
    },
    beforeDestroy: function(){
      this.$root.eventHub.$off('closePassEditDialog', this.hidePassDialog);
    },
    methods: {
      ...mapMutations([
        'clearUser'
      ]),
      logout(){
        this.clearUser();

        UserApi.logout(json=>{});

        this.$router.push('/login');
      },
      modifyPassHandle(){
        this.isShowPassEditDialog = true;
      },
      hidePassDialog(){
        this.isShowPassEditDialog = false;
      }
    }
  }
</script>

<style type="text/css">
  .header-wrapper {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1500;
    height: 60px;
  }
  .header{
    height: 60px;
    background-color: #fff;
    color: #fff;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 60px;
    z-index: 100;
    position: relative;
  }
  .header-wrapper .container{
    padding: 0 70px;
    height: 100%;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .nav-left, .nav-menu{
    display: inline-block;
    vertical-align: top;
  }
  .nav-left{font-size: 24px; font-weight: 400; position: relative; padding-left: 65px; line-height: 60px;}
  .nav-left .logo{position: absolute; left: 0; top: 7px; width: 46px; height: 46px; border-radius: 50%;}


  .nav-right{float: right;}
  .nav-menu{border: none;}

  .el-menu--horizontal>.el-menu-item,
  .el-menu--horizontal>.el-menu-item.is-active,
  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title, 
  .el-menu--horizontal>.el-submenu .el-submenu__title{border-bottom: none;}

  .el-menu-item, .el-submenu__title{font-size: 15px; font-weight: 400;}
  .el-submenu__icon-arrow{font-size: 15px;}

  .el-menu--horizontal>.el-menu-item.is-active,
  .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{font-size: 15px;}

  .el-submenu.is-active .el-submenu__title i{color: #409EFF;}

  .el-menu--horizontal>.el-menu-item.is-active,
  .el-menu--horizontal>.el-submenu.is-active{font-weight: 400;}
</style>
